<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>画室信息化办公系统</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <meta http-equiv="Cache-Control" content="no-store"/>
        <meta http-equiv="Pragma" content="no-cache"/>
        <meta http-equiv="Expires" content="0"/>
        <link rel="stylesheet" type="text/css" href="/soolloa/ext-3.2.0/resources/css/ext-all.css" />
        <style type="text/css">
            html, body {
                font: normal 12px verdana;
                margin: 0;
                padding: 0;
                border: 0 none;
                overflow: hidden;
                height: 100%;
            }
            
            p {
                margin: 5px;
            } .settings {
                background-image: url(/soolloa/image/folder_wrench.png);
            } .nav {
                background-image: url(/soolloa/image/folder_go.png);
            } .home {
                background-image: url(/soolloa/image/home.png);
            } .menubar {
                border-bottom: 1px solid #AACCF6;
                color: #222222;
                cursor: pointer;
                display: block;
                height: 20px;
                width: 194px;
                line-height: 17px;
                outline-color: -moz-use-text-color;
                outline-style: none;
                outline-width: 0;
                padding: 3px;
                text-align: center;
                text-decoration: none;
                white-space: nowrap;
            }
            
            a:hover {
                display: inline-block; /*重点就在这里，这里是触发a:hover的Layout*/
                background: #fff;
            } .tabs {
                background-image: url(/soolloa/image/tabs.gif ) !important;
            }
        </style>
        <!-- GC --><!-- LIBS -->
        <script type="text/javascript" src="/soolloa/ext-3.2.0/adapter/ext/ext-base.js">
        </script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="/soolloa/ext-3.2.0/ext-all.js">
        </script>
        <script type="text/javascript" src="/soolloa/ext-3.2.0/src/locale/ext-lang-zh_CN.js">
        </script>
        <script type="text/javascript" src="/soolloa/ext-3.2.0/ux/TabCloseMenu.js">
        </script>
        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = "/soolloa/ext-3.2.0/resources/images/default/s.gif";
        </script>
        <!-- EXAMPLES
        <script type="text/javascript" src="../shared/examples.js"></script>
        -->
        <script type="text/javascript">
            Ext.onReady(function(){
            
                // NOTE: This is an example showing simple state management. During development,
                // it is generally best to disable state management as dynamically-generated ids
                // can change across page loads, leading to unpredictable results.  The developer
                // should ensure that stable state ids are set for stateful components in real apps.
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
                var item1 = new Ext.Panel({
                    title: '学员管理',
                    contentEl: 'studentManager',
                    cls: 'empty',
                    iconCls: 'nav'
                });
                
                var item2 = new Ext.Panel({
                    title: '教师管理',
                    html: '&lt;empty panel&gt;',
                    cls: 'empty',
                    iconCls: 'nav'
                });
                
                var item3 = new Ext.Panel({
                    title: '班级管理',
                    html: '&lt;empty panel&gt;',
                    cls: 'empty',
                    iconCls: 'nav'
                });
                
                var item4 = new Ext.Panel({
                    title: '财务管理',
                    html: '&lt;empty panel&gt;',
                    cls: 'empty',
                    iconCls: 'nav'
                });
                
                var item5 = new Ext.Panel({
                    title: '系统管理',
                    html: '&lt;empty panel&gt;',
                    cls: 'empty',
                    iconCls: 'nav'
                });
                
                var viewport = new Ext.Viewport({
                    layout: 'border',
                    items: [        // create instance immediately
                    {
                        region: 'north',
                        height: 80,
                        margins: '0 5 0 5',
                        contentEl: 'nav_area',
                        bbar: new Ext.Toolbar(['->', {
                            text: 'WebIM',
                            iconCls: 'cog',
                            handler: function(){
                                //webim.show();
                            }
                        }, {
                            text: 'Setting',
                            iconCls: 'config',
                            handler: function(){
                            }
                        }, {
                            text: '退出',
                            icon: '/soolloa/image/exit.png',
                            handler: function(){
                                location.href = "/soolloa/j_spring_security_logout";
                            }
                        }])
                    }, {
                        // lazily created panel (xtype:'panel' is default)
                        region: 'south',
                        contentEl: 'south',
                        split: true,
                        height: 30,
                        minSize: 100,
                        maxSize: 200,
                        // collapsible: true,
                        // title: 'South',
                        margins: '0 5 5 5'
                    }, {
                        region: 'west',
                        id: 'west-panel', // see Ext.getCmp() below
                        title: '功能菜单',
                        split: true,
                        width: 200,
                        minSize: 175,
                        maxSize: 400,
                        collapsible: true,
                        margins: '0 0 0 5',
                        layout: {
                            type: 'accordion',
                            animate: true
                        },
                        items: [item1, item2, item3, item4, item5]
                    },        // in this instance the TabPanel is not wrapped by another panel
                    // since no title is needed, this Panel is added directly
                    // as a Container
                    /*new Ext.TabPanel({
                     id:'tabPanel',
                     region: 'center', // a center region is ALWAYS required for border layout
                     deferredRender: false,
                     margins: '0 5 0 0',
                     activeTab: 0,     // first tab initially active
                     items:[{title:"首页",id:'homeTab',closable:true,iconCls:'home',html:'<p>asdsd</p>'}],
                     plugins: new Ext.ux.TabCloseMenu()
                     })*/
                    new Ext.TabPanel({
                        id: 'tabsPanel',
                        resizeTabs: true, // turn on tab resizing
                        minTabWidth: 115,
                        tabWidth: 135,
                        enableTabScroll: true,
                        width: 600,
                        height: 250,
                        defaults: {
                            autoScroll: true
                        },
                        plugins: new Ext.ux.TabCloseMenu()
                    })]
                });
                // get a reference to the HTML element with id "hideit" and add a click listener to it 
                /* Ext.get("hideit").on('click', function(){alert(1);
                 // get a reference to the Panel that was created with id = 'west-panel'
                 var w = Ext.getCmp('west-panel');
                 // expand or collapse that Panel based on its collapsed property state
                 w.collapsed ? w.expand() : w.collapse();
                 });*/
            });
        </script>
    </head>
    <body>
        <!-- header -->
        <div id="nav_area" class="x-date-bottom">
            <table cellspacing="0" border="0" cellpadding="0" width="100%">
                <tr>
                    <td>
                        <div style="font-size:18px;font-weight:bold;">
                            <img height="40" width="180" src="/soolloa/image/logo.jpg"/>
                        </div>
                    </td>
                    <td align="right" style="padding-right: 5px">
                        OA
                    </td>
                </tr>
            </table>
        </div>
        <!-- 学员管理 --><!-- <div id="studentManager"  >
        <div style="cursor:pointer;" >&nbsp;&nbsp;&nbsp;&nbsp;<img style="margin-top: 4px;" src="/soolloa/image/user.png"/><font size="2" style="text-align:center;">学员报名</font></div>
        </div> -->
        <ul id="studentManager">
            <li>
                <a id="knowledge" class="menubar">知识导航</a>
            </li>
            <li>
                <a id="bbs" class="menubar">公告</a>
            </li>
            <li>
                <a id="question" class="menubar">待解决问题</a>
            </li>
            <li>
                <a id="sloved" class="menubar">已解决问题</a>
            </li>
            <li>
                <a id="knownw" class="menubar">知识贡献</a>
            </li>
            <li>
                <a id="tagslist" class="menubar">Tags</a>
            </li>
        </ul>
        <div id="south" class="x-hide-display">
            <p align="center">
                Copyright©2010 超拓网络 <a href="http://www.sooll.com.cn">www.sooll.com.cn</a>
                版权所有 
            </p>
        </div>
    </body>
    <script type="text/javascript">
        var index = 0;
        while (index < 7) {
            addTab();
        }
        function addTab(){
            Ext.getCmp("tabsPanel").add({
                title: 'New Tab ' + (++index),
                iconCls: 'tabs',
                html: 'Tab Body ' + (index) + '<br/><br/>',
                closable: true
            }).show();
        }
    </script>
</html>
